<!--
 * @Author: 涵崽
 * @Date: 2024-02-29 09:58:53
 * @email: 1045654@qq.com
 * @gitee: https://gitee.com/han-zai
 * @LastEditors: 涵崽
 * @LastEditTime: 2024-02-29 14:50:22
 * @Description: 微信：1045654
-->

<template>
  <div>
    <el-date-picker
      v-model="datetime"
      type="daterange"
      :align="align"
      unlink-panels
      :range-separator="rangeSeparator"
      :start-placeholder="startPlaceholder"
      :end-placeholder="endPlaceholder"
      :picker-options="pickerOptions"
      value-format="yyyy-MM-dd"
    />
  </div>
</template>

<script>
export default {
  props: {
    time: {
      type: [Array, String], // 使用数组来指定多个可能的类型
      validator: function(value) {
        // 这是一个可选的验证函数，用于进一步验证传入的值
        // 如果验证失败，应返回 false
        if (Array.isArray(value)) {
          // 如果 time 是数组，检查它是否包含字符串
          return value.every((item) => typeof item === 'string')
        } else if (typeof value === 'string') {
          // 如果 time 是字符串，检查它是否是有效的日期字符串
          // 这里可以根据你的需求来添加日期字符串的验证逻辑
          return true // 假设任何字符串都是有效的
        }
        return false // 如果不是数组也不是字符串，或者验证失败，返回 false
      },
      default: ''
    },
    startPlaceholder: {
      type: String,
      default: '开始日期'
    },
    endPlaceholder: {
      type: String,
      default: '结束日期'
    },
    rangeSeparator: {
      type: String,
      default: '至'
    },
    align: {
      type: String,
      default: 'left'
    }
  },
  data() {
    return {
      pickerOptions: {
        shortcuts: [
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }
        ]
      },
      datetime: ''
    }
  },
  watch: {
    datetime(val) {
      if (val.length === 2) {
        // 创建一个新的数组来存储转换后的日期字符串
        const transformedVal = val.map((dateStr) => {
          // 假设数组的第一个元素是开始日期，第二个元素是结束日期
          if (val.indexOf(dateStr) === 0) {
            // 如果是开始日期，添加 " 00:00:00"
            return `${dateStr} 00:00:00`
          } else {
            // 如果是结束日期，添加 " 23:59:59"
            return `${dateStr} 23:59:59`
          }
        })
        // 使用转换后的数组发出事件
        this.$emit('update:time', transformedVal)
      }
    }
  },
  created() {
    this.datetime = this.time
  },
  methods: {}
}
</script>

<style lang="scss" scoped></style>
